<template>
    <div class="login" style="background-color: #fff; height: 100vh">
        <van-nav-bar
            right-text="注册"
            @click-left="goMine"
            :border="false"
            @click-right="goRegister"
        >
            <template #left>
                <van-icon name="cross" size="18" />
            </template>
        </van-nav-bar>
        <div class="login-container">
            <div class="title">欢迎登录Ebook</div>
            <div class="form-warp">
                <van-form @submit="onSubmit" submit-on-enter>
                    <van-cell-group inset>
                        <van-field
                            v-model="loginForm.username"
                            name="用户名"
                            label="用户名"
                            placeholder="用户名"
                            :rules="[
                                { required: true, message: '请填写用户名' },
                            ]"
                        />
                        <van-field
                            v-model="loginForm.password"
                            type="password"
                            name="密码"
                            label="密码"
                            placeholder="密码"
                            :rules="[{ required: true, message: '请填写密码' }]"
                        />
                    </van-cell-group>

                    <div style="margin: 16px">
                        <van-button
                            round
                            block
                            type="primary"
                            @click="onSubmit"
                        >
                            登录
                        </van-button>
                    </div>
                </van-form>
            </div>
        </div>
    </div>
</template>

<script>
import { reactive, ref, toRef } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { login } from '../../api/index'
import { Toast } from 'vant'
export default {
    components: { Toast },
    setup() {
        const router = useRouter()
        const store = useStore()
        const checked = ref(true)
        const loginForm = reactive({
            username: '919368650',
            password: '123456',
        })
        const onSubmit = async () => {
            Toast.loading({
                message: '登陆中...',
                forbidClick: true,
                duration: 0,
            })

            try {
                await store.dispatch('user/login', loginForm)
                Toast.success({
                    message: '登陆成功\n正在为您跳转页面！',
                    forbidClick: true,
                    duration: 1000,
                })
                router.push('/mine')
            } catch (error) {
                Toast.fail({
                    message: error,
                    forbidClick: true,
                    duration: 2000,
                })
            }
        }
        const goRegister = () => {
            router.push('/register')
        }
        const goMine = () => {
            router.push('/mine')
        }

        return {
            onSubmit,
            ...toRef(loginForm),
            loginForm,
            checked,
            goRegister,
            goMine,
        }
    },
}
</script>
<style scoped lang="scss">
.login {
    --van-field-label-width: 4.2em;
}
.title {
    color: rgb(88, 86, 86);
    font-weight: 600;
    font-size: 20px;
    margin-bottom: 20px;
    padding: 10px 0;
}
.login-container {
    height: calc(100% - 46px);
    background-color: #fff;
    padding: 20px;
    --van-cell-group-inset-padding: 0;
    --van-cell-horizontal-padding: 0;
}
</style>
